<template>
    <page-wrapper>
        <table-search @search="search(1)" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-input v-model.trim="form.deviceName" placeholder="设备名称" />
                </form-item>
                <form-item label="">
                    <a-tree-select
                        v-model="form.ctgCode"
                        style="width: 160px"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="categoryList"
                        :replaceFields="{children:'childs', label:'ctgName', key:'id', value: 'ctgCode'}"
                        placeholder="请选择类别"
                    >
                    </a-tree-select>
                </form-item>
                <form-item label="">
                    <a-select v-model="form.pdtCode" style="width:160px;" show-search optionFilterProp="name" placeholder="请选择产品">
                        <a-select-option v-for="product in productList"
                            :name="product.pdtName+product.pdtCode"
                            :value="product.pdtCode"
                            :key="product.pdtCode">
                            {{ product.pdtName }}
                        </a-select-option>
                    </a-select>
                </form-item>
                <!-- <form-item label="">
                    <a-select v-model="form.status" style="width:120px;" allowClear placeholder="请选择状态">
                        <a-select-option value="inactive">停用</a-select-option>
                        <a-select-option value="active">正常</a-select-option>
                    </a-select>
                </form-item> -->
            </template>
            <template slot="extra">
                <a-button class="filter-item" type="primary" :disabled="hasPerm(['device:helmet:add'])" icon="plus" @click="addInfo()">新增设备</a-button>
                <a-button
                    class="filter-item btn_space"
                    type="danger"
                    @click="remove()"
                    :disabled="!selectionBox.length || hasPerm(['device:helmet:remove'])"
                    icon="delete"
                    >删除</a-button
                >
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="id"
            :pagination="pagination"
            :selection="selection"
            :data="list"
        >
            <template slot="status" slot-scope="{ text }">
                <a-switch
                    checked-children="激活"
                    un-checked-children="禁用"
                    :key="text.helmetId"
                    :default-checked="text.status=='active' ? true : false"
                    @change="onSwitchStatus(text)"
                />
            </template>
            <template slot="action" slot-scope="{ text }">
                <a-button size="small" type="primary" class="btn_space" :disabled="hasPerm(['device:helmet:query'])" @click="showInfo(text)">详情</a-button>
                <a-button size="small" type="primary" class="btn_space" :disabled="hasPerm(['device:helmet:update'])" @click="addInfo(text)">编辑</a-button>
                <a-button size="small" type="danger" class="btn_space" :disabled="hasPerm(['device:helmet:remove'])" @click="remove(text)">删除</a-button>
            </template>
        </table-list>

        <template v-if="isShowInfo">
            <device-info :info="itemInfo" @cancel="isShowInfo = false" @submit="submit" />
        </template>
        
        <template v-if="showDetail">
            <product-detail :info="itemInfo" :code="itemInfo.pdtCode" :deviceCode="itemInfo.deviceCode" @cancel="showDetail=false" />
        </template>

    </page-wrapper>
</template>
<script>
import table from '@/mixins/table';
import { columns } from './columns';
import deviceInfo from './components/info';
import {remoteList,updateInfo,deleteInfo} from '@/api/device'
import categoryApi from '@/api/product/type'
import productApi from '@/api/product/list'
import ProductDetail from './detail/index';

export default {
    name: 'UserList',
    mixins: [table],
    components: {
        deviceInfo,
        ProductDetail
    },
    data() {
        let originForm = {
            deviceName: null,
            ctgCode: undefined,
            pdtCode: undefined,
            status: undefined,
        };
        return {
            originForm,
            form: {
                ...originForm
            },
            columns,
            categoryList:[],
            productList:[],
            itemInfo: null,
            isShowInfo: false,
            showDetail: false
        };
    },
    watch:{
        'form.ctgCode':function(value){
            this.form.pdtCode = undefined
            this.getProductList(value)
            console.log(value)
        }
    },
    created(){
        this.search(1);
        this.getCateList();
        this.getProductList()
    },
    methods: {
        async search(page) {
            try {
                this.loading = true;
                if(page){
                    this.form.page = page
                }
                this.list = []
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
                this.selectionBox = []
            } finally {
                this.loading = false;
            }
        },
        //删除
        remove(item = '') {
            this.$confirm({
                title: '提示',
                content: '确定要删除该信标？',
                okText: '确定',
                cancelText: '取消',
                onOk:async ()=>{
                    try{
                        let ids=[];
                        if (item) {
                            ids = [item.id];
                        } else {
                            let selectionBox = this.selectionBox;
                            selectionBox.map(async item => {
                                ids.push(item.id);
                            });
                        }
                        await deleteInfo({ids});
                        this.$message.success('删除成功!');
                        this.search(1);
                    }catch(err){

                    }
                },
                onCancel() {}
            });
        },
        //是否开启
        async onSwitchStatus(item) {
            try {
                let { status } = item;
                item.status = status=='active' ? 'inactive': 'active';
                this.loading = true;
                await updateInfo(item);
                this.$message.success('操作成功!');
            } catch (err) {
                let { status } = item;
                item.status = status ? 'inactive' : 'active';
            } finally {
                this.loading = false;
            }
        },
        showInfo(item){
            this.itemInfo = item;
            this.showDetail = true;
        },
        //显示添加用户
        addInfo(item = {}) {
            this.isShowInfo = true;
            this.itemInfo = item;
        },
        submit() {
            this.isShowInfo = false;
            this.itemInfo = {}
            this.search(1);
        },
        //获取分类数据
        async getCateList(){
            let res = await categoryApi.remoteList();
            this.categoryList = res.data;
        },
        //根据分类获取产品列表
        async getProductList(ctgCode){
            let res = await productApi.remoteList({page:1,size:100,ctgCode});
            this.productList = res.data.list;
        }
    }
};
</script>
